<template>
  <div class="container">
    <ul>
      <li>{{ msg }}</li>
      <li><slot></slot></li>

      <li>{{ text }}</li>
    </ul>
    <button @click="handleClick">修改</button>
    <button @click="handleEmit">传递给父组件值</button>
  </div>
  <!-- <div>{{ text }}</div> -->
</template>
<script setup>
// 组合式API 语法
import { ref, onMounted, getCurrentInstance } from "vue"; // ref 响应式数据
// import axios from "axios"; // axios 请求库

const msg = ref("hello vue");
// 父组件中传递的数据
defineProps({
  text: String,
});

// 定义函数
function handleClick() {
  // 修改 ref 响应式数据的值，使用 .value 获取值/修改值
  msg.value = "hello vite";
}

const emit = defineEmits(["custom", "custom2"]);
// 给父组件传递值
function handleEmit() {
  // 触发父组件中的事件
  emit("custom", "hello", msg.value);
}

const { proxy } = getCurrentInstance();

onMounted(() => {
  console.log("mounted");

  proxy.$axios.get("/api/test").then((resp) => {
    console.log(resp);
  });
});
</script>
<style scoped>
.container {
  background-color: antiquewhite;
}
</style>
